
import React, { Component } from 'react'

import { TabBar } from 'antd-mobile';
import { withRouter } from 'react-router-dom'

class TabBarExample extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedTab: 'index',
      hidden: false,
      fullScreen: true,
    };
  }

  render() {
    return (
      <div style={{ position: 'fixed', height: '100%', width: '100%', top: 0 }}>
        <TabBar
          unselectedTintColor="#949494"
          tintColor="#e9434f"
          barTintColor="white"
          hidden={this.state.hidden}
        >
          <TabBar.Item
            title="主页"
            key="index"
            icon={
              <i className="iconfont icon-shouye"></i>
            }
            selectedIcon={
              <i className="iconfont icon-shouyex"></i>
            }
            selected={this.props.location.pathname === '/'}
            onPress={() => {
              this.props.history.push('/')
            }}
          >
            {this.props.location.pathname === '/' && this.props.children}
          </TabBar.Item>
          <TabBar.Item
            icon={
              <i className="iconfont icon-fenlei"></i>
            }
            selectedIcon={
              <i className="iconfont icon-icon_category"></i>
            }
            title="分类"
            key="category"
            selected={this.props.location.pathname === '/category'}
            onPress={() => {
              this.props.history.push('/category')
            }}
          >
            {this.props.location.pathname === '/category' && this.props.children}
          </TabBar.Item>
          <TabBar.Item
            icon={
              <i className="iconfont icon-gouwuche"></i>
            }
            selectedIcon={
              <i className="iconfont icon-gwc"></i>
            }
            title="购物车"
            key="cart"
            selected={this.props.location.pathname === '/cart'}
            onPress={() => {
              this.props.history.push('/cart')
            }}
          >
            {this.props.location.pathname === '/cart' && this.props.children}
          </TabBar.Item>
          <TabBar.Item
            icon={
              <i className="iconfont icon-wode"></i>
            }
            selectedIcon={
              <i className="iconfont icon-wodejianying"></i>
            }
            title="我的"
            key="my"
            selected={this.props.location.pathname === '/my'}
            onPress={() => {
              this.props.history.push('/my')
            }}
          >
            {this.props.location.pathname === '/my' && this.props.children}
          </TabBar.Item>
        </TabBar>
      </div>
    );
  }
}

export default withRouter(TabBarExample)